<template>
    <div class="contion">
        <div class="title">
            <span>消息</span>
            <el-icon style="margin-left:120px;"><User /></el-icon>
            <span>发起群聊</span>
        </div>
        <div class="message">
            <div>
                <div class="message_1">
                    <div class="message_1_1">1</div>
                    <van-icon name="like" size="30" color="#fd5e5b" style="padding-left:15px"/> 
                </div>
                <span>赞和收藏</span>
            </div>
            <div>
                <div class="message_2">
                    <div class="message_1_1">1</div>
                    <van-icon name="contact" size="30" color="#3686ff" style="padding-left:15px"/>
                </div>
                <span style="margin-left: 60px;">新增关注</span>
            </div>
            <div>
                <div class="message_3">
                <div class="message_1_1">1</div>
                <van-icon name="wechat-pay" size="30" color="#2fd996" style="padding-left:15px"/>
            </div>
            <span style="margin-left: 60px;">评论和@</span>
            </div>
        </div>
        <div>
            <div class="messages">
                <div class="messages_1">
                    <img src="../img/5.jpg" style="width: 50px;border-radius:50%;margin-right:15px;">
                    <div style="display:flex;flex-direction:column;">
                        <span><b>消息通知</b></span>
                        <span>活动通知：如何与自己的现状和解</span>
                    </div>
                </div>
                <div class="messages_1" @click="customer">
                    <img src="../img/6.jpg" style="width: 50px;border-radius:50%;margin-right:15px;">
                    <div style="display:flex;flex-direction:column;">
                        <span><b>客服</b></span>
                    </div>
                </div>
                <div class="messages_1">
                    <img src="../img/7.jpg" style="width: 50px;border-radius:50%;margin-right:15px;">
                    <div style="display:flex;flex-direction:column;">
                        <span><b>小小四er</b></span>
                        <span>[图片]</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="home">
            <span style="margin-left:20px;margin-right:20px" @click="home"><b>首页</b></span>
            <span style="margin-left:40px;margin-right:20px" @click="goods">购物</span>
            <el-button><el-icon :size="30" @click="add"><Plus color="#fff"/></el-icon></el-button>
            <span style="font-size:20px;color:#000;margin-left:40px;margin-right:20px"><b>消息</b></span>
            <span style="margin-left:40px;margin-right:20px" @click="my">我</span>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import http from '../http';
import { ElMessage } from 'element-plus';

const router = useRouter();


const customer = () => {
    router.push('/user')
}
const goods = () => {
    router.push('/goods')
}

const home = () => {
    router.push('/')
}

const add = () => {
    router.push('/add')
}
const my = () => {
    router.push('/my')
}
</script>

<style scoped>
.contion{
    display: flex;
    flex-direction: column;
    justify-content: center;
    vertical-align: middle;
}

.title{
    display: flex;
    flex-direction: row;
    width: 100%; /* 设置标签栏宽度 */
    height: 50px;
    position: fixed; /* 固定定位，保持在顶部 */
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index:100; /* 确保在其他元素之上 */
    align-items: center;
    padding-left:350px;
}

.message{
    display:flex;
    flex-direction: row;
    margin-top: 80px;
    margin-left: 60px;
}

.message_1{
    width: 60px;
    height: 60px;
    background-color: #feeaea;
    border-radius: 15px;
    margin-bottom: 10px;
}

.message_1_1{
    width: 15px;
    height: 20px;
    background-color: #FF2442;
    border-radius: 50%;
    color:#FFFFFF;
    padding-left: 5px;
    margin-left: 45px;
}

.message_2{
    width: 60px;
    height: 60px;
    background-color: #e7f0ff;
    border-radius: 15px;
    margin-left: 60px;
    margin-bottom: 10px;
}

.message_3{
    width: 60px;
    height: 60px;
    background-color: #e4faf0;
    border-radius: 15px;
    margin-left: 60px;
    margin-bottom: 10px;
}

.messages_1{
    display: flex;
    flex-direction: row;
    margin: 30px;
}
.home{
    width: 100%; /* 设置标签栏宽度 */
    max-width: 600px; /* 最大宽度限制 */
    height: 50px;
    margin: 0 auto; /* 水平居中 */
    position: fixed; /* 固定定位，保持在底部 */
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100; /* 确保在其他元素之上 */
    padding-top: 20px;
    font-size: 18px;
    color: darkgray;
}

.home button{
    background-color: #FF2442;
    border-radius: 10px;
    width: 60px;
    height: 40px;
    margin-left:20px;
}
</style>